<template>
<div class="wrap">
    <Scroll class="content" 
    :probe-type='3' 
    :pull-upload="true" 
    ref="scroll"
    >
    <div class="memberlist" >
        <member-item v-for="item in message" :key="item.id" @refresh="onceRefresh" :sex="item.sex">
            <span slot="name">{{ item.name }}</span>
            <span slot="age">{{ item.birthday }}岁</span>
            <span slot="phone">{{ item.phone }}</span>
        </member-item>
    </div>
    </Scroll>
</div>
</template>

<script>
import MemberItem from './MemberItem';
import Scroll from '@/components/common/scroll/Scroll.vue';
import {debounce} from '@/components/common/common.js';
    export default {
        data() {
            return {
                refresh: null
            }
        },
        components: {
            MemberItem,
            Scroll,

        },
        props: {
             message: {
                type: Array,
                default(){
                    return []
                }
            },
        },
        mounted () {
            // 防抖函数
            this.refresh = debounce(this.$refs.scroll.refresh,50)
        },
        methods: {
            onceRefresh(){
                // 只刷新一次
                 this.refresh()
            },
        },
    }
</script>

<style  scoped>
.wrap{
    height: 100vh;
}
.content{
    height: calc(100% - 205px);
    overflow: hidden;
}
</style>